Stack Views এবং Dynamic UI Components

Mobile App Development - আইওএস ডেভেলপমেন্ট (iOS) - UIKit এর মাধ্যমে UI ডিজাইন

203

UIKit এ Stack Views এবং Dynamic UI Components ব্যবহারের মাধ্যমে আমরা সহজেই রেসপন্সিভ এবং ডাইনামিক ইন্টারফেস তৈরি করতে পারি। Stack Views আমাদের UI উপাদানগুলোকে সহজে সাজাতে সাহায্য করে, আর Dynamic UI Components ব্যবহারের মাধ্যমে আমরা প্রোগ্রাম্যাটিক্যালি UI তৈরি এবং পরিবর্তন করতে পারি। নিচে Stack Views এবং Dynamic UI Components ব্যবহারের বিস্তারিত আলোচনা করা হলো।

Stack Views কি?

Stack Views হলো UIKit এর একটি কন্টেইনার ভিউ যা একাধিক UI উপাদানকে ভের্টিক্যাল (উল্লম্ব) বা হরিজন্টাল (অনুভূমিক) লেআউটে সাজাতে সাহায্য করে। এটি Auto Layout এর সাথে সমন্বিত হয়ে UI ডিজাইন সহজ করে এবং রেসপন্সিভ লেআউট তৈরি করতে সহায়তা করে।

Stack Views এর বৈশিষ্ট্য

Axis: ভিউগুলোর লেআউট horizontal বা vertical হতে পারে।
Alignment: ভিউগুলোকে কিভাবে সাজানো হবে, যেমন: fill, center, leading, বা trailing।
Distribution: ভিউগুলোর আকার কিভাবে বিতরণ করা হবে, যেমন: fill, fillEqually, equalSpacing, ইত্যাদি।
Spacing: প্রতিটি ভিউয়ের মধ্যে কতটুকু ফাঁকা থাকবে তা নির্ধারণ করা যায়।

Stack View তৈরি করা (Programmatic)

একটি Stack View প্রোগ্রাম্যাটিক্যালি তৈরি করার উদাহরণ দেওয়া হলো:

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // লেবেল তৈরি করা
        let label1 = UILabel()
        label1.text = "Label 1"
        label1.backgroundColor = .red
        
        let label2 = UILabel()
        label2.text = "Label 2"
        label2.backgroundColor = .green
        
        let label3 = UILabel()
        label3.text = "Label 3"
        label3.backgroundColor = .blue
        
        // Stack View তৈরি করা
        let stackView = UIStackView(arrangedSubviews: [label1, label2, label3])
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .fillEqually
        stackView.spacing = 10
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // Stack View ভিউতে যোগ করা
        view.addSubview(stackView)
        
        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            stackView.heightAnchor.constraint(equalToConstant: 200)
        ])
    }
}

ব্যাখ্যা:

UIStackView তৈরি করা: আমরা UIStackView তৈরি করেছি এবং তিনটি লেবেলকে arrangedSubviews হিসেবে যুক্ত করেছি।
Stack View কনফিগার করা: Stack View এর axis, alignment, distribution, এবং spacing কনফিগার করেছি।
Auto Layout কনস্ট্রেইন্ট সেট করা: Stack View কে ভিউ কন্ট্রোলারের মধ্যে কেন্দ্রীয়ভাবে সাইজ এবং পজিশন সেট করেছি।

Dynamic UI Components

Dynamic UI Components মানে প্রোগ্রাম্যাটিক্যালি UI উপাদান তৈরি করা এবং প্রয়োজনে এগুলোর স্ট্রাকচার বা লেআউট পরিবর্তন করা। এটি তখন দরকার হয় যখন UI কম্পোনেন্টগুলো রানটাইমে অ্যাড, রিমুভ, বা আপডেট করতে হয়, যেমন: কোনো লিস্টে নতুন আইটেম যোগ করা, বা কোনো ফর্মে নতুন ফিল্ড যোগ করা।

Dynamic UI Components উদাহরণ

নিচে একটি উদাহরণ দেওয়া হলো যেখানে আমরা একটি বাটনে ট্যাপ করলে নতুন UILabel Stack View তে যোগ করব:

import UIKit

class ViewController: UIViewController {

    let stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Stack View কনফিগার করা
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.distribution = .equalSpacing
        stackView.spacing = 10
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        // Stack View ভিউতে যোগ করা
        view.addSubview(stackView)
        
        // Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
        ])
        
        // UIButton তৈরি করা
        let button = UIButton(type: .system)
        button.setTitle("Add Label", for: .normal)
        button.addTarget(self, action: #selector(addLabel), for: .touchUpInside)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)
        
        // Button এর Auto Layout কনস্ট্রেইন্ট সেট করা
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 20)
        ])
    }

    @objc func addLabel() {
        // নতুন UILabel তৈরি করা
        let newLabel = UILabel()
        newLabel.text = "New Label"
        newLabel.backgroundColor = .lightGray
        newLabel.textAlignment = .center
        
        // Stack View তে নতুন UILabel যোগ করা
        stackView.addArrangedSubview(newLabel)
    }
}

ব্যাখ্যা:

Stack View তৈরি এবং কনফিগার করা: আমরা একটি UIStackView তৈরি করেছি এবং এটি ভিউতে যুক্ত করেছি। এখানে Stack View এর axis, alignment, distribution এবং spacing সেট করা হয়েছে।
Dynamic UILabel যোগ করা: addLabel ফাংশনে আমরা একটি নতুন UILabel তৈরি করে Stack View তে যোগ করছি। এটি বাটনের মাধ্যমে কল করা হচ্ছে।